<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%;height: 500px">
      <el-table-column prop="cityCode" label="编号" width="180" />
      <el-table-column prop="cityName" label="市" width="180" />
      <el-table-column label="火电" width="80">
        <template #default="scope">
          <span v-show="!scope.row.isEdit">
            {{ scope.row.thermalPower }}
          </span>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.thermalPower" />
        </template>
      </el-table-column>
      <el-table-column label="光电" width="80">
        <template #default="scope">
          <span v-show="!scope.row.isEdit">
            {{ scope.row.pvPower }}
          </span>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.pvPower" />
        </template>
      </el-table-column>
      <el-table-column label="风电" width="80">
        <template #default="scope">
          <span v-show="!scope.row.isEdit">
            {{ scope.row.windPower }}
          </span>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.windPower" />
        </template>
      </el-table-column>
      <el-table-column label="核电" width="80">
        <template #default="scope">
          <span v-show="!scope.row.isEdit">
            {{ scope.row.nuclearPower }}
          </span>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.nuclearPower" />
        </template>
      </el-table-column>
      <el-table-column label="其他" width="80">
        <template #default="scope">
          <span v-show="!scope.row.isEdit">
            {{ scope.row.otherPower }}
          </span>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.otherPower" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button v-if="scope.row.isEdit" type="text" @click="handleSave(scope.row)">
            保存
          </el-button>
          <el-button v-else type="text" @click="handleEdit(scope.row)">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import * as $api from "@/api/api";
import { ElMessage } from 'element-plus'

const props = defineProps({
  tableData: {
    type: Array,
    default: []
  }
})

watch(
  () => props.tableData,
  (newVal) => {
    console.log(newVal);
  }
);

const handleEdit = (row) => {
  console.log(row);
  row.isEdit = true;
}
const handleSave = (row) => {
  console.log(row);
  row.isEdit = !row;
  $api.UpdatePower(row).then(res => {
    console.log(res);
    ElMessage({
      message: '保存成功',
      type: 'success',
    })
  }).catch(err => {
    ElMessage.error(err);
  })
}
</script>

<style lang="scss" scoped></style>